<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			let pros=[]  //省份的数组
			function init(){
				let xhr=new XMLHttpRequest()
				xhr.open("GET","city.json",false)
				xhr.send()
				let data=xhr.responseText //以纯文本方式接收json
				pros=JSON.parse(data)//必须是严格的JSON文件格式,不能有注释
				let p=document.getElementById("p")  //页面上省的下拉列表
				let c=document.getElementById("c")  //页面上市的下拉列表
				for (let i = 0; i < pros.length; i++) {
					p.options[i]=new Option(pros[i].name)
				}
				//将四川(第1个省)的市加到下拉列表中
				for (let i = 0; i < pros[0].cities.length; i++) {
					c.options[i]=new Option(pros[0].cities[i])
					
				}
			}
			// function change(){
				//先获得用户选择的第n个省==用户选择的第n个选项
				// let select=document.querySelector("select")
				// let index=select.selectedIndex //表示选中的选项索引
				// let c=colors[index].querySelector("value").innerHTML
				// document.body.setAttribute("style","background-color:"+c+";")
			// }
			function change(){
				//先获得用户选择的第n个省==用户选择的第n个选项
				let p=document.getElementById("p")  //页面上省的下拉列表
				let c=document.getElementById("c")  //页面上市的下拉列表
				c.length=0//清空城市的下拉选项
				let n=p.selectedIndex//这个属性表示用户选择的选项索引值
				for (let i = 0; i < pros[n].cities.length; i++) {
					c.options[i]=new Option(pros[n].cities[i])
					
				}
			}
		</script>
	</head>
	<body onload="init()">
		请选择：<select id="p" onchange="change()"></select>省<select id="c"></select>市
	</body>
</html>
